<template>
  <div style="width: 100%;height: 100%;">
    <div id="cesiumContainer"></div>
    <div style="position: absolute;top:50px;right: 50px;">
      <el-select v-model="value" placeholder="请选择" @change="changeDataSource">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      viewer: null,
      options: [{
        value: 'Track with Waypoints',
        label: 'Track with Waypoints'
      }, {
        value: 'Route',
        label: 'Route'
      }, {
        value: 'Waypoints',
        label: 'Waypoints'
      }, {
        value: 'Multiple Tracks with Waypoints',
        label: 'Multiple Tracks with Waypoints'
      }, {
        value: 'Symbology Options',
        label: 'Symbology Options'
      }],
      value: 'Track with Waypoints'
    }
  },
  mounted() {
    this.initCesium()
    this.changeDataSource(this.viewer)
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addTrackWithWaypoints() {
      this.viewer.dataSources.add(
        Cesium.GpxDataSource.load("http://localhost:8888/model/SampleData/gpx/lamina.gpx",
          {
            clampToGround: true
          }
        )
      ).then((dataSource) => {
        this.viewer.flyTo(dataSource.entities);
      });
    },
    addRoute() {
      this.viewer.dataSources.add(Cesium.GpxDataSource.load(
        "http://localhost:8888/model/SampleData/gpx/route.gpx",
        {
          clampToGround: true
        }
        )
      ).then((dataSource) => {
        this.viewer.flyTo(dataSource.entities);
      });
    },
    addWaypoints() {
      this.viewer.dataSources.add(Cesium.GpxDataSource.load("http://localhost:8888/model/SampleData/gpx/wpt.gpx", {
          clampToGround: true
        })
      ).then((dataSource) => {
        this.viewer.flyTo(dataSource.entities);
      });
    },
    addMultipleTracksWithWaypoints() {
      this.viewer.dataSources.add(Cesium.GpxDataSource.load("http://localhost:8888/model/SampleData/gpx/complexTrk.gpx",
        {clampToGround: true}
        )
      ).then((dataSource) => {
        this.viewer.flyTo(dataSource.entities);
      });
    },
    addSymbologyOptions() {
      const pinBuilder = new Cesium.PinBuilder();
      this.viewer.dataSources.add(Cesium.GpxDataSource.load("http://localhost:8888/model/SampleData/gpx/lamina.gpx",
        {
          clampToGround: true,
          trackColor: Cesium.Color.YELLOW,
          waypointImage: pinBuilder.fromMakiIconId(
            "bicycle",
            Cesium.Color.BLUE,
            48
          )
        }
        )
      ).then((dataSource) => {
        this.viewer.flyTo(dataSource.entities);
      });
    },

    changeDataSource(value) {
      this.viewer.dataSources.removeAll();
      this.viewer.clock.clockRange = Cesium.ClockRange.UNBOUNDED;
      this.viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK;
      switch (value) {
        case 'Track with Waypoints':
          this.addTrackWithWaypoints();
          break;
        case 'Route':
          this.addRoute();
          break;

        case 'Waypoints':
          this.addWaypoints();
          break;
        case 'Multiple Tracks with Waypoints':
          this.addMultipleTracksWithWaypoints();
          break;
        case 'Symbology Options':
          this.addSymbologyOptions();
          break;
        default:
          break;
      }
    }
  }
}
</script>
<style scoped>
#cesiumContainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
